<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/ding.css" />
		
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title" id="city">地点</h1>
		</header>
	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
			
			
	<ul class="mui-table-view">
		  <li class="mui-table-view-cell mui-media">
	       <div class="home">
				<i class="mui-icon mui-icon-starhalf"></i>
				<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_171204/thumb/201712041643395816_700_467.jpg" class="car">
				<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">
				<b>￥168</b>
				<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>
				<p>
					<span>4.7分/64点评</span>
					<span>1居/2床/宜住2人</span>
					<span>近天府广场地铁站</span>
				</p>
				<p>
					<span>连珠优惠</span>
					<span>闪订</span>
					<span>实拍</span>
					<span>验真</span>
					<span>免押金</span>
				</p>
			</div>
	    </li>
	   <li class="mui-table-view-cell mui-media">
	       <div class="home">
				<i class="mui-icon mui-icon-starhalf"></i>
				<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_180115/thumb/201801151424465650_700_467.jpg" class="car">
				<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">
				<b>￥168</b>
				<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>
				<p>
					<span>4.7分/64点评</span>
					<span>1居/2床/宜住2人</span>
					<span>近天府广场地铁站</span>
				</p>
				<p>
					<span>连珠优惠</span>
					<span>闪订</span>
					<span>实拍</span>
					<span>验真</span>
					<span>免押金</span>
				</p>
			</div>
	    </li>
	     <li class="mui-table-view-cell mui-media">
	       <div class="home">
				<i class="mui-icon mui-icon-starhalf"></i>
				<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_171204/thumb/201712041639067200_700_467.jpg" class="car">
				<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">
				<b>￥168</b>
				<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>
				<p>
					<span>4.7分/64点评</span>
					<span>1居/2床/宜住2人</span>
					<span>近天府广场地铁站</span>
				</p>
				<p>
					<span>连珠优惠</span>
					<span>闪订</span>
					<span>实拍</span>
					<span>验真</span>
					<span>免押金</span>
				</p>
			</div>
	    </li>
	    
	     <li class="mui-table-view-cell mui-media">
	       <div class="home">
				<i class="mui-icon mui-icon-starhalf"></i>
				<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_180115/thumb/201801151426141610_700_467.jpg" class="car">
				<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">
				<b>￥168</b>
				<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>
				<p>
					<span>4.7分/64点评</span>
					<span>1居/2床/宜住2人</span>
					<span>近天府广场地铁站</span>
				</p>
				<p>
					<span>连珠优惠</span>
					<span>闪订</span>
					<span>实拍</span>
					<span>验真</span>
					<span>免押金</span>
				</p>
			</div>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	       <div class="home">
				<i class="mui-icon mui-icon-starhalf"></i>
				<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_180115/thumb/201801151425244459_700_467.jpg" class="car">
				<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">
				<b>￥168</b>
				<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>
				<p>
					<span>4.7分/64点评</span>
					<span>1居/2床/宜住2人</span>
					<span>近天府广场地铁站</span>
				</p>
				<p>
					<span>连珠优惠</span>
					<span>闪订</span>
					<span>实拍</span>
					<span>验真</span>
					<span>免押金</span>
				</p>
			</div>
	    </li>
	     
	  
	</ul>
	</div>
	</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
      	mui.init({
		  pullRefresh : {
		    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      callback :function(){
		      	plus.geolocation.getCurrentPosition(function(m){
   	
   	
			   	city.innerHTML = m.address.city;
			   	
			   	plus.contacts.getAddressBook( 0, function(res){
			   			
			   		res.find( null, function(res){
			   			//alert(JSON.stringify(res))
			   		});
			   		
			   	});
			   	
			   	
			   });
		      	mui('#refreshContainer').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	for(var i=1;i<6;i++){
		      			let oLi = document.createElement("li");
		      	oLi.className = "mui-table-view-cell mui-media";
		      	oLi.innerHTML =   '<div class="home">'+
				'<i class="mui-icon mui-icon-starhalf"></i>'+
				'<img style="-webkit-user-select: none;max-width: 100%;" src="https://pic.tujia.com/upload/mobileconfig/day_171204/thumb/201712041643395816_700_467.jpg" class="car">'+
				'<img data-v-f6ee5db4="" src="https://pic.tujia.com/upload/LandlordStoreLogo/day_170804/20170804152959186.jpg" alt="用户头像" class="person">'+
				'<b>￥168</b>'+
				'<p>成都天府广场宽窄巷子一锦二巷温馨双床房</p>'+
				'<p>'+
					'<span>4.7分/64点评</span>'+
					'<span>1居/2床/宜住2人</span>'+
					'<span>近天府广场地铁站</span>'+
				'</p>'+
				'<p>'+
					'<span>连珠优惠</span>'+
					'<span>闪订</span>'+
					'<span>实拍</span>'+
					'<span>验真</span>'+
					'<span>免押金</span>'+
				'</p>'+
			'</div>'
	        let oUl =  document.querySelector('.mui-table-view');
	         oUl.appendChild(oLi);
		      	}
		      
	       
	        
		      	this.endPullupToRefresh(true);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});
    </script>
	</body>

</html>